var CanvasAlarm = (function(window) {
  var CanvasAlarm = function(warpId, canvasId, imagePath) {
    return new CanvasAlarm.fn.init(warpId, canvasId, imagePath)
  }

  CanvasAlarm.fn = CanvasAlarm.prototype = {
    constructor: CanvasAlarm,
    init: function(warpId, canvasId, imagePath) {
      this.imgX = 0// 在画布上图片的X偏移量
      this.imgY = 0// 在画布上图片的Y偏移量
      this.imgScale = 1// 图片的缩放比例
      this.rateNum = 1// 图片高度自适应比例,图片等比居中展示在canvas
      this.scaleFlag = 0// 缩放因子，最大缩放9,最小缩放-9
      this.img = ''
      this.pos = {}// 每次拖拽前坐标保存
      this.dragFlag = false// 是否可拖拽当前img，默认不能

      this.wrap = document.getElementById(warpId)
      this.canvas = document.getElementById(canvasId)
      this.context = this.canvas.getContext('2d')
      this.imagePath = imagePath
    },
    loadImage: function() {
      if (this.imagePath) {
        this.canvas.height = this.wrap.offsetHeight
        this.canvas.width = this.wrap.offsetWidth
        this.img = new Image()
        let that = this
        this.img.onload = function() {
          var scale1=that.canvas.height / that.img.naturalHeight;
          var scale2=that.canvas.width / that.img.naturalWidth;
          that.imgScale = scale1>scale2?scale2:scale1;
          that.imgScale = that.imgScale*0.9;
          that.imgX = (that.canvas.width - that.img.naturalWidth * that.imgScale * that.rateNum) / 2// 默认进来当前图像剧中显示
          that.imgY = (that.canvas.height - that.img.naturalHeight * that.imgScale * that.rateNum) / 2// 默认进来当前图像剧中显示
          /* 画出当前图片 */
          that.drawImg()
        }
        this.img.src = this.imagePath
      }
    },
    drawImg: function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.context.drawImage(this.img, 0, 0, this.img.naturalWidth, this.img.naturalHeight, this.imgX, this.imgY, this.img.naturalWidth * this.imgScale * this.rateNum, this.img.naturalHeight * this.imgScale * this.rateNum)
    },
    drawPoint: function() {
      //获得要素点
      for (var i = 0; i < alarmJsonData.message.data.length; i++) {
        let alarmData = alarmJsonData.message.data[i]
        let element = this.getElement(alarmData)

        if (element) {
          if (element.show_type == 2) {
            // 第二个点
            //let newPoint2 = this.getNewPoint2(element.line_wa_lon, element.line_wa_lat)
            // 框
            //this.context.strokeStyle = 'red'
            //var labelColor = '#FFF'

            //if (element.line_side == 1) {
            //  this.context.strokeRect(newPoint2.x - element.show_width/2, newPoint2.y - (element.sort_no * 35), element.show_width, 30)
            //} else {
            //  this.context.strokeRect(newPoint2.x - element.show_width/2, newPoint2.y + 5 + ((element.sort_no - 1) * 35), element.show_width, 30)
            //}
            // 数据
            //this.context.font = '18px bold 黑体'// 设置字体
            //this.context.fillStyle = 'red'// 设置颜色
            //if (element.line_side == 1) {
            //  this.context.fillText(alarmData.value, newPoint2.x - 27, newPoint2.y - ((element.sort_no - 1) * 4 * 9) - 12)
            //} else {
            //  this.context.fillText(alarmData.value, newPoint2.x - 27, newPoint2.y + (element.sort_no * 4 * 9) - 8)
            //}
          }

          //更新表格
          var alarmTableBody = $('#alarmTableBody')
          var rows = $('#alarmTableBody').find('tr')
          if (rows.length >= 9) {
            $('#alarmTableBody tr:last').remove()
          }
          var msg;
          var msgLen=alarmData.message.length;
          if(msgLen>5){
        	  msg=alarmData.message.substring(0,5);
          }else{
        	  msg=alarmData.message;
          }
          var row = '<tr><td title='+alarmData.code+alarmData.orderNum+'>' + alarmData.code+alarmData.orderNum+ '</td><td><span title='+alarmData.value+' class=\'text-d\'>' + alarmData.value + '</span></td><td><span class=\'text-w\' title='+msg+'>' + msg + '</span></td><td><span class=\'text-b\'>' + alarmJsonData.message.time + '</span></td></tr>'
          alarmTableBody.prepend(row)
        }
      }
    },
    getNewPoint1: function(x, y) {
      let obj = {}
      obj.x = x * this.imgScale + this.imgX
      obj.y = y * this.imgScale + this.imgY
      return obj
    },
    getNewPoint2: function(x, y) {
      let obj = {}
      obj.x = x * this.imgScale + this.imgX
      obj.y = y * this.imgScale + this.imgY
      return obj
    },
    getElement: function(alarmData) {
      if (alarmJsonData && alarmJsonData.message && alarmJsonData.message.data) {
        for (var i = 0; i < waconfigList.length; i++) {
          if (alarmData.code == waconfigList[i].code && alarmData.orderNum == waconfigList[i].order_num) {
            return waconfigList[i]
          }
        }
      }
    }
  }

  CanvasAlarm.fn.init.prototype = CanvasAlarm.fn
  return CanvasAlarm
})()
